<template>
  <el-upload
    class="upload-demo"
    ref="upload"
    action="/api/excelUtil/upload"
    accept="xlsx"
    name="111.xlsx"
    multiple
    :http-request="submitUpload"
    :on-preview="handlePreview"
    :on-remove="handleRemove"
    :file-list="fileList"
    :auto-upload="true">
    <el-button slot="trigger" size="small" type="primary">选取文件</el-button>
    <el-button style="margin-left: 10px;" size="small" type="success" @click="submitUpload">上传到服务器</el-button>
    <div slot="tip" class="el-upload__tip">只能上传xlsx文件，且不超过1M</div>
  </el-upload>
</template>

<script>
import axios from 'axios';
import {Form} from "element-ui";
  export default {
    name: 'ExcelDemo',
    data() {
      return {
        fileList: []
      };
    },
    methods: {
      handleRemove(file, fileList) {
        console.log('======================',file, fileList);
      },
      handlePreview(file) {
        console.log("==============1");
        // const ExcelJS = require('exceljs');
        //
        // const workbook = new ExcelJS.Workbook();
        // workbook.xlsx.readFile(file);
        // var s = workbook.getWorksheet(0);
        // console.log(s);
        // const workbook = new ExcelJS.Workbook();
        // workbook.creator = 'Me';
        // workbook.lastModifiedBy = 'Her';
        // workbook.created = new Date(1985, 8, 30);
        // workbook.modified = new Date();
        // workbook.lastPrinted = new Date(2016, 9, 27);

        // var sheetName = 'Sheet1';
        // var sheet = workbook.addWorksheet(sheetName);
        //
        // sheet.columns = [
        //   { header: 'Id', key: 'id', width: 10 },
        //   { header: 'Name', key: 'name', width: 32 },
        //   { header: 'D.O.B.', key: 'DOB', width: 10, outlineLevel: 1 }
        // ];
        // // const workbook = createAndFillWorkbook();
        // await workbook.xlsx.writeFile(file.name);


        // var workbook = new Excel.Workbook();
        // workbook.xlsx.readFile(file.path)
        //   .then(function() {
        //     // use workbook
        //     var s = workbook.getWorksheet(0).getRow(0);
        //     console.log('======================',s);
        //   });

        // const buffer = workbook.xlsx.writeBuffer();
        // const fileType = 'application/vnd.ms-excel';
        // let EXCEL_EXTENSION = '.xlsx';
        // const blob= new Blob([buffer], {type: fileType});
        // FileSaver.saveAs(blob, file.name);

        // window.open(file);

        // workbook.xlsx.writeFile('filename.xlsx')
        //   .then(function () {
        //     // done
        //     console.log('done')
        //   });
      },
      handleExceed(files, fileList) {
        this.$message.warning(`当前限制选择 3 个文件，本次选择了 ${files.length} 个文件，共选择了 ${files.length + fileList.length} 个文件`);
      },
      beforeRemove(file, fileList) {
        return this.$confirm(`确定移除 ${ file.name }？`);
      },
      submitUpload(param) {
        let formData  = new FormData();
        console.log(param.file)
        formData.append("file", param.file);
        formData.append("ruleId","1111222")
        axios.post("/api/excelUtil/upload", formData);
      }
    }
  };
</script>
